<div class="col-xs-10 col-xs-offset-1">
  <div class="row">
    <div class="col-md-12 large-searchbar">
      <%= form_for :search, url: search_path, method: :get do |f| %>
        <%= f.search_field :q, value: params[:q], placeholder: 'Search Stories', autofocus: true, autocomplete: 'off', onfocus: "this.value = this.value;" %>
      <% end %>
    </div>
  </div>


  <div class="row">
    <div class="col-md-2">
      <div class="search-filter-links">
        <div class="active filter-link">
          <%= link_to search_path(q: params[:q]) do %>
            All <span class="glyphicon glyphicon-chevron-right pull-right"></span>
          <% end %>
        </div>
        <div class="filter-link"><%= link_to 'People', search_users_path(q: params[:q]) %></div>
      </div>
    </div>

    <div class="col-md-6" data-animation="fadeInUp-fadeOutDown">
      <% if @posts.any? %>
        <div data-behavior="endless-scroll">
          <h4 class="small-heading border-top">Stories</h4>
          <%= render @posts %>
        </div>
        <div class="center">
          <%= will_paginate @post_records %>
        </div>
      <% end %>
    </div>

    <aside class="col-md-4" data-animation="fadeInUp-fadeOutDown">
      <% if @tags.any? %>
        <h4 class="small-heading border-top">Tags</h4>
        <%= react_component('TagList', { tags: @tags }, { prerender: true }) %>
      <% end %>
      <% if @users.any? %>
        <h4 class="small-heading border-top">People</h4>
        <% @users.each do |user| %>
          <%= render partial: 'search/user_card', locals: { user: user } %>
        <% end %>
      <% end %>
    </aside>

  </div>
</div>
